<template>
  <div>
    <ChaCao>
      <template #txt1>
        <p>本周热搜</p>
      </template>
      <template #txt2>
        <li>方式1</li>
        <li>方式2</li>
        <li>方式3</li>
        <li>方式4</li>
      </template>
    </ChaCao>
    <ChaCao>
      <template #txt1>
        <p>可能感兴趣</p>
        <img src="./assets/换一批.png" alt="" />
        换一批
      </template>
      <template #txt2>
        <li>
          <div class="body2">
            <div class="left">
              <h2>小何20岁</h2>
              <p>研究领域：信息技术</p>
              <p>国防七子·教授</p>
            </div>
            <a href="javascript:;">+关注</a>
          </div>
        </li>
        <li>
          <div class="body2">
            <div class="left">
              <h2>老何20岁</h2>
              <p>研究领域：信息技术</p>
              <p>国防七子·教授</p>
            </div>
            <a href="javascript:;">+关注</a>
          </div>
        </li>
        <li></li>
        <li></li>
      </template>
    </ChaCao>
  </div>
</template>

<script>
import ChaCao from "./components/ChaCao.vue";
export default {
  data() {
    return {};
  },
  components: {
    ChaCao,
  },
};
</script>
<style lang="less" scoped>
.body2 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #efefef;
}

.body2 h2 {
  font-weight: normal;
  font-size: 20px;
}

.body2 p:first-of-type {
  margin: 4px 0;
}

.body2 a {
  text-decoration: none;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #007aff;
  text-align: center;
  color: #fff;
}
</style>
